<template>
  <div style=" background-color: #F5F6FA;">
    <!-- <hear></hear> -->
    <BDhear :num=6></BDhear>
    <div style="background-color: #fff;">
      <div class="Bid_AI_box">
        <div class="bid_AI_name">
          <div class="dian"></div>
          <div style="color:#333333;font-weight:bold;font-size:20px">对公账户信息</div>
        </div>
        <div style="width:1200px;margin-top:40px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- <el-col :span="12">
              <el-form-item label="支付金额" prop="name">
                <el-input :disabled="true" v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="银行卡号" prop="bankcode">
                <el-input :disabled="true" v-model="ruleForm.bankcode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="bankaccount">
                <el-input :disabled="true" v-model="ruleForm.bankaccount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行名称" prop="bankname">
                <el-input :disabled="true" v-model="ruleForm.bankname"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
      <div class="Bid_PI_box">
        <div class="bid_AI_name">
          <div class="dian"></div>
          <div style="color:#333333;font-weight:bold;font-size:20px">对公账户信息</div>
        </div>
        <div style="width:1200px;margin-top:40px">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-col :span="12">
              <el-form-item label="银行名称" prop="rebankname">
                <el-input v-model="ruleForm.rebankname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡号" prop="rebankcode">
                <el-input v-model="ruleForm.rebankcode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="rebankaccount">
                <el-input v-model="ruleForm.rebankaccount"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="开户行账号" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col> -->
          
          </el-form>
          <!-- <div>
               <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.image " :src="this.$baseUrl+ruleForm.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </div> -->
           <div class="bacl">
            支付凭证
              <div class="input-flex">
                <el-upload
                  class="avatar-uploader"
                  action="http://192.168.0.28:8082/mobile/common/upload/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="fullurl" :src="fullurl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
        </div>
      </div>
      <div class="bid_pt_BTN">
        <el-button style="width:175px;height:60px" @click="$router.push('/BidSecurity/ElectronicProtocol')"  >上一步</el-button>
        <!-- <el-button style="width:175px;height:60px" @click="invoiceStatus = true">申请发票</el-button> -->
        <el-button style="width:175px;height:60px" @click="bhpays" type="primary">完成</el-button>
      </div>
      <div v-if="invoiceStatus == true" class="invoiceStatus_poper">
        <div class="IS_poper_hear">
          <div style="margin-left:20px">申请发票</div>
          <div style="margin-right:20px" @click="invoiceStatus = false">×</div>
        </div>
        <div class="IS_poper_body">
          <div class="IS_poper_form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-col :span="12">
                <el-form-item label="支付金额" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户号码" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户行账号" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户行账号" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户行账号" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <div class="AI_form_btn">
              <el-button style="width:175px;height:60px" @click="invoiceStatus = false">取消</el-button>
              <el-button style="width:175px;height:60px" type="primary">确认</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="invoicePoper == true" class="IS_poper_invoice">
        <div class="IS_poper_invoice_hear"></div>
        <div class="IS_poper_invoice_body">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getpayinfo,bhpay } from "@/api/houer";
// import hear from '.././../components/hear.vue'
import BDhear from './BDhear.vue'
export default {
  components: {
    // hear,
    BDhear
  },
  name: 'Bidpayment',
  data() {
    return {
      invoicePoper: false,
      invoiceStatus: false,
      ruleForm: {
      rebankname:"",
      rebankcode:"",
      rebankaccount:"",
      },

      rules: {

      },
      fullurl:"",
    }
  },
   created() {
this.getpayinfos()
    // this.cion.id = sessionStorage.getItem("guarantee_apply_id");
  },
  methods: {
        handleAvatarSuccess(res, file) {
          console.log("图片",res.data.fullurl)
          this.fullurl=res.data.fullurl
      this.ruleForm.image = res.data;
    },
        beforeAvatarUpload(file) {},
    getpayinfos(){
      var cion={
        // user_id:sessionStorage.getItem("user_id"),
        guarantee_id:sessionStorage.getItem("guarantee_apply_id"),
      }
 getpayinfo(cion).then(err => {
        console.log("已经提交",err.data.data)
        this.ruleForm=err.data.data.bank
        var bbc={
             rebankname:"",
      rebankcode:"",
      rebankaccount:"",
        }
        this.ruleForm={
          ...this.ruleForm,
          ...bbc
        }
        if (err.data.code == 1) {
          this.$message({
            message: "获取成功",
            type: "success"
          });
          // this.$router.push("/Agreement");
        } else {
            this.$message({
            message:err.data.mag,
            type: "success"
          });
          // this.$message.error(err.data.mag);
        }
      });
    },
    bhpays(){
      this.ruleForm.guarantee_id=sessionStorage.getItem("guarantee_apply_id"),
        // this.ruleForm.user_id=sessionStorage.getItem("user_id"),
        this.ruleForm.image="1231312"
 bhpay(this.ruleForm).then(err => {
        console.log("已经提交",err.data)
        // this.ruleForm=err.data.data.info
        if (err.data.code == 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push("/BidSecurity/puBlic");
        } else {
            this.$message({
            message:err.data.mag,
            type: "success"
          });
          // this.$message.error(err.data.mag);
        }
      });
    },
    open() {
      this.invoiceStatus = true
      console.log(this.invoiceStatus);
    }
  }
}
</script>

<style scoped>
.IS_poper_invoice_hear {
  width: 770px;
  height: 60px;
  background-color: #1795FF;

}

.IS_poper_invoice_body {
  width: 770px;
  height: 651px;
  background-color: #fff;
}

.IS_poper_invoice {
  width: 770px;
  height: 651px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.09);
  opacity: 1;
  position: relative;
  left: 30%;
  bottom: 76%;
}
.avatar{
  width:100px
}
.AI_form_btn {
  position: relative;
  left: 36%;
  top: 25%;
  width: 400px;
}
.bacl {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.input-flex {
  display: flex;
  margin-top: 0.625rem;
}
.avatar-uploader .el-upload {
  border: 0.0625rem dashed #d9d9d9;
  border-radius: 0.375rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  border: 0.0625rem solid #d9d9d9;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 1.75rem;
  color: #8c939d;
  width: 24.125rem;
  height: 15.125rem;
  line-height: 15.125rem;
  text-align: center;
}
.IS_poper_form {
  width: 1200px;
  margin-top: 48px;
}
.avatar {
  width: 24.125rem;
  height: 15.125rem;
  /* object-fit: cover; */
  display: block;
}
.IS_poper_body {
  width: 1436px;
  height: 498px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
}

.IS_poper_hear {
  width: 1436px;
  height: 59px;
  background-color: #1795FF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 18px;
  font-weight: Bold;
}

.invoiceStatus_poper {
  width: 1436px;
  height: 517px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.09);
  opacity: 1;
  position: relative;
  left: 13%;
  bottom: 58%;
}

.bid_pt_BTN {
  width: 400px;
  position: relative;
  left: 37%;
  top: 18%;
}

.form_PV_box {
  width: 221px;
  height: 159px;
  border: 1px solid #CECECE;
  margin-top: 131px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Bid_PI_box {
  width: 1400px;
  height: 550px;
  opacity: 1;
  border: 1px solid #CECECE;
  position: relative;
  left: 14%;
  top: 11%;
}

.bid_AI_name {
  padding-left: 58px;
  padding-top: 25px;
  display: flex;
  align-items: center;
}

.Bid_AI_box {
  width: 1400px;
  height: 244px;
  border: 1px solid #CECECE;
  position: relative;
  left: 14%;
  top: 5%;
}

.dian {
  width: 6px;
  height: 6px;
  border-radius: 180px;
  background-color: #333;
  margin-right: 10px;
}
</style>
